<!--
*@Author: zt
*@Description: 会议室编辑
*@Date: 2024-07-08 17:04:38
-->
<template>
  <u-dialog v-bind="$attrs" 
    @close="dialogClose" 
    @submit="submit">
    <a-layout class="f-h-100">
      <a-layout-content class="s-bg-white" style="overflow: auto">
        <a-space direction="vertical" class="f-w-100">
          <u-busi-card title="基本信息" :bordered="false">
            <u-form
              :elements="formEls"
              :model="form"
              :gutter="0"
              ref="formRef"
            ></u-form>
          </u-busi-card>
          <u-busi-card title="会议室照片" :bordered="false">
            <u-upload-img
              v-model:value="roomImgs"
              :fileParams="{ biztype: '3', bucket: 'ADM_BIZ_TYPE_CONFERENCE' }"
              accept=".jpg, .png, .jpeg, .gif"
            ></u-upload-img>
          </u-busi-card>
        </a-space>
      </a-layout-content>
    </a-layout>
  </u-dialog>
</template>

<script lang="ts" setup>
import { ref, useAttrs, watch } from 'vue';
import { _IFormEl, _IExtra } from '@/src/components/common/form/interface';
import { FormItemProps } from 'ant-design-vue';
import { alertC } from '@/util/common';
import { cloneDeep } from 'lodash';
import * as meetRoomApi from '@/service/administration/meet/room/index';

const attrs = useAttrs();
const emits = defineEmits(['success', 'close']);
// 会议室图片
const roomImgs = ref([]);
const formRef = ref();
let form = ref({});
const formItemProps: FormItemProps & _IExtra = {
  labelWidth: '150px',
  colon: false,
};
const formEls: Array<_IFormEl> = [
  {
    label: '会议室名称',
    key: 'name',
    col: { span: 24 },
    element: 'input',
    formItemProps: { ...formItemProps, required: true },
  },
  {
    label: '会议室地点',
    key: 'address',
    col: { span: 12 },
    element: 'input',
    formItemProps: { ...formItemProps, required: true },
  },
  {
    label: '容纳人数',
    key: 'capacity',
    col: { span: 12 },
    element: 'number',
    formItemProps: { ...formItemProps, required: true },
  },
  {
    label: '会议室备注',
    key: 'remark',
    col: { span: 24 },
    element: 'textarea',
    formItemProps: { ...formItemProps },
  },
];

// 确认
const submit = () => {
  if (roomImgs.value.length < 1) {
    alertC('请上传一张会议室图片', 'warning');
    return;
  }
  formRef.value.form.validate().then(async item => {
    const url = attrs.keyid ? 'update' : 'add';
    let copyform = cloneDeep(form.value);
    copyform.appendixSaveVOList = roomImgs.value;
    const result = await meetRoomApi[url](copyform);
    if (result.code == 0) {
      emits('success');
      dialogClose()
      alertC(result.msg, 'success');
    } else {
      alertC(result.msg, 'warning');
    }
  });
};

// 回显
const getHx = async () => {
  const res = await meetRoomApi.query(attrs.keyid);
  if (res.code == 0) {
    for (let key in res.data) {
      if (key == 'appendix') {
        roomImgs.value = res.data['appendix'];
      } else {
        form.value[key] = res.data[key];
      }
    }
  }
};

watch(
  () => attrs.open,
  async (val, nav) => {
    if (val) {
      if (attrs.keyid != '') {
        await getHx();
      }
    }
  }
);

// 弹窗关闭
const dialogClose = () => {
  form.value = {};
  roomImgs.value = [];
  formRef.value.form.resetFields();
};
</script>

<style lang="scss"></style>
